<template>
  <div class="sidebar">
    <div class="sidebar-logo">
      <img src="@/assets/logo.png" alt="Logo" class="logo-img" />
    </div>

    <el-scrollbar class="sidebar-menu-container">
      <el-menu
        class="app-sidebar-menu"
        :default-active="activeMenu"
        :collapse="false"
        :unique-opened="true"
        :router="true"
        mode="vertical"
        background-color="var(--sidebar-bg)"
        text-color="var(--sidebar-text)"
        active-text-color="var(--sidebar-active-text)"
      >
        <SidebarItem
          v-for="route in routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SidebarItem from './SidebarItem.vue'

const route = useRoute()
const router = useRouter()

const routes = computed(() => {
  const root = router.getRoutes().find(r => r.path === '/')
  return root?.children?.filter(item => !item.meta?.hidden) || []
})

const activeMenu = computed(() => route.meta?.activeMenu || route.path)
</script>

<style scoped>
.sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  height: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.logo-img { height: 28px; }

.sidebar-menu-container { flex: 1; }

.app-sidebar-menu {
  border-right: none;
  padding: 10px 10px 14px 10px;
  background: var(--sidebar-bg) !important;
}

/* 项高度、圆角、间距统一 */
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 40px;
  line-height: 40px;
  margin: 6px 0;
  border-radius: var(--radius-s);
  color: var(--sidebar-text);
  font-size: 13px;
  padding: 0 12px;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background: var(--sidebar-hover) !important;
}

/* 选中态统一胶囊高亮 */
:deep(.is-active) {
  color: var(--sidebar-active-text) !important;
  background: var(--sidebar-active) !important;
  box-shadow: 0 6px 16px rgba(59,130,246,0.35);
}

:deep(.el-sub-menu__title) { border: 1px solid transparent; }
:deep(.el-sub-menu.is-opened > .el-sub-menu__title) { border-color: rgba(255,255,255,0.06); }

:deep(.el-menu-item i),
:deep(.el-sub-menu__title i) { margin-right: 8px; font-size: 16px; }

/* 隐滚条外观 */
:deep(.el-scrollbar__bar){ opacity: 0; }
:deep(.el-scrollbar__bar:hover){ opacity: 1; }
</style>